<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <p style="border-bottom: 1px solid #ebeef5; padding-bottom: 20px">
      商品列表
    </p>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span
                ><img
                  style="width: 170px; height: 150px"
                  :src="props.row.imgUrl"
                  alt=""
              /></span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img style="width: 50px" :src="scope.row.imgUrl" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="clickEdit(scope.row)" size="mini " type="primary"
            >编辑</el-button
          >
          <el-button @click="clickdel(scope.row)" size="mini" type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 蒙层 -->
    <div v-show="isshow" class="mask">
      <div class="mask-card">
        <div style="display: flex; justify-content: space-between">
          <!-- 名字 -->
          <p style="display: flex; margin-top: 20px">
            <span style="margin-right: 14px; line-height: 36px">商品名称</span>
            <el-input
              style="width: 300px"
              placeholder="请输入内容"
              v-model="maskName"
              clearable
            ></el-input>
          </p>

          <!-- 返回 -->
          <i
            style="font-size: 30px; color: #ccc"
            class="el-icon-circle-close"
            @click="clickBack"
          ></i>
        </div>

        <!-- 分类 -->
        <p style="display: flex; margin-top: 20px">
          <span style="margin-right: 14px; line-height: 36px">所属分类</span>
          <el-select
            style="width: 200px"
            v-model="selectvalue"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in cateList"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            >
            </el-option>
          </el-select>
        </p>

        <!-- 价格 -->
        <p style="display: flex; margin-top: 20px">
          <span style="margin-right: 14px; line-height: 36px">商品价格</span>
          <el-input style="width: 100px" v-model="price" clearable></el-input>
        </p>

        <!-- 上传图片 -->
        <p style="display: flex; margin-top: 20px">
          <span style="margin-right: 14px; line-height: 36px">商品图片</span>
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="imgUploadSuccess"
          >
            <img
              style="width: 100px; height: 100px"
              v-if="callbackImg"
              :src="callbackImg"
              class="avatar"
            />
            <i v-else class="icon el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>

        <!-- 描述 -->
        <p style="display: flex; margin-top: 20px">
          <span style="margin-right: 14px; line-height: 36px">商品描述</span>
          <el-input
            style="width: 300px"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="desc"
          >
          </el-input>
        </p>

        <el-button
          @click="clickSave"
          style="margin-top: 20px; margin-left: 76px"
          type="primary"
          >保存修改</el-button
        >
      </div>
    </div>

    <!-- 翻页 -->
    <el-pagination
      style="height: 50px; padding-top: 15px"
      @size-change="sizeChange"
      @current-change="curChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { goodsList, delList, categories, goodsEdit } from "@/apis/goods";
import { getChinaTime } from "@/utils/utils";
export default {
  data() {
    return {
      isshow: false,
      currentPage: 1, //当前页
      pagesize: 4, //每页显示条数
      total: 0, //总条数
      list: [],
      cateList: [], //分类列表
      maskName: "",
      selectvalue: "",
      price: "",
      callbackImg: "",
      newImg: "",
      desc: "",
      goodsid: "",
      unmodified: "", //没有修改过图片，将图片截取
    };
  },
  created() {
    this.reqtableData();
  },

  methods: {
    reqtableData() {
      goodsList({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.ctime = getChinaTime(obj.ctime);
        }
        this.list = res.data.data;
        this.total = res.data.total;
        // console.log(res);
      });
    },
    //点击当前页
    curChange(val) {
      // console.log(val);
      this.currentPage = val;
      this.reqtableData();
    },

    //当前页输入框
    sizeChange(val) {
      this.pagesize = val;
      this.reqtableData();
    },

    //删除
    clickdel(row) {
      // console.log(row.id);
      this.$confirm("此操作将永久删除该信息, 是否继续?", "甜品小屋贴心提示您", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //发送ajax
          delList({
            id: row.id,
          }).then((res) => {
            if (res.data.code === 0) {
              this.reqtableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //查看商品分类
    getCategories() {
      categories().then((res) => {
        this.cateList = res.data.categories;
      });
    },

    //编辑
    clickEdit(row) {
      this.getCategories();
      this.isshow = true;
      // console.log(row);
      this.maskName = row.name;
      this.selectvalue = row.category;
      this.price = row.price;
      this.callbackImg = row.imgUrl;
      this.desc = row.goodsDesc;
      this.goodsid = row.id;
      this.unmodified = this.callbackImg.substring(
        this.callbackImg.lastIndexOf("/") + 1
      ); //将原始图片截取出请求中要的地址
    },

    //上传图片
    imgUploadSuccess(res, file) {
      this.newImg = res.imgUrl; //新名字
      this.callbackImg = URL.createObjectURL(file.raw);
      // console.log(this.newImg);
    },

    //修改---保存
    clickSave() {
      this.isshow = false;
      goodsEdit({
        name: this.maskName,
        category: this.selectvalue,
        price: this.price,
        imgUrl: this.newImg == "" ? this.unmodified : this.newImg,
        goodsDesc: this.desc,
        id: this.goodsid,
      }).then((res) => {
        // console.log(res);
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        this.reqtableData();
      });
    },

    //返回
    clickBack() {
      this.isshow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.mask {
  z-index: 10;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(120, 121, 123, 0.8);
  .mask-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    padding: 10px;
    padding-left: 20px;
    background-color: #fff;
  }
}
</style>